<template>
    <div class="main">
        <div class="banner">
            <img :src="banner" class="ob-cover">
        </div>
        <Content>
            <template #content>
                <div class="b-w p-20-30 box">
                    <el-row class="dispaly-between">
                        <el-col :span="6">
                            <div class="cate">
                                <div :class="{ 'active': state.current == index }" class="item pointer"
                                    @click="clickCate(item, index)" v-for="(item, index) in state.cateList"
                                    :key="index">{{ item.name }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="18">
                            <div class="title">{{ state.cateItem.name ? state.cateItem.name : state.cateList[0].name
                                }}
                            </div>
                            <div class="list">
                                <div v-if="!state.dataLlist.length" class="empty dispaly-col-center">
                                    <el-empty description="暂无数据" :image-size="200" />
                                </div>
                                <div class="list-box" v-else>
                                    <ListItem type="achievement" :item="item" v-for="(item, index) in state.dataLlist"
                                        :key="index" />
                                </div>
                            </div>

                        </el-col>
                    </el-row>
                    <div class="page">
                        <el-pagination @current-change="pageChange" layout="prev, pager, next" :total="state.total" />
                    </div>
                </div>
            </template>
        </Content>
        <Pop />
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue'
import ListItem from '@/views/common/components/listItem.vue'
import { getList } from '@/api/index/index'

const banner = computed(() => localStorage.getItem('banner'))
const state = reactive({
    cateList: [
        { name: '企业', type: 3 },
        { name: '成就', type: 4 },
        { name: '作品', type: 5 }
    ],
    dataLlist: [],
    current: 0,
    cateItem: {},
    queryData: {
        pageNum: 1,
        pageSize: 5,
        type: 4,
    },
    total: 0
})

// 请求列表
const getListData = async () => {
    const res = await getList(state.queryData)
    if (res.code == 200) {
        state.total = res.total
        state.dataLlist = res.rows
    }
}

onMounted(() => {
    getListData()
})

// 点击分类
const clickCate = (item, index) => {
    init()
    state.cateItem = item
    state.current = index
    state.queryData.type = item.type
    getListData()
}

// 初始化
const init = () => {
    state.queryData.pageNum = 1
    state.dataLlist = []
}

// 分页
const pageChange = (page) => {
    state.queryData.pageNum = page
    getListData()
}
</script>

<style lang="scss" scoped>
.active {
    background-color: $primary-color !important;
    color: #fff !important;

}

.main {

    .banner {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .box {
        max-height: $c-height;
        min-height: $c-height;
        position: relative;

        .cate {
            overflow-y: scroll;
            max-height: $c-height;
            min-height: $c-height;

            .item:last-child {
                margin-bottom: 0;
            }

            .item:hover {
                color: $primary-color;
            }

            .item {
                padding: 20px 10px;
                background-color: #ece7dc;
                color: #333;
                font-family: MicrosoftYaHei;
                font-size: 22px;
                margin-top: 8px;
            }
        }

        .title {
            font-family: MicrosoftYaHei;
            font-size: 20px;
            color: #000001;
            border-bottom: 2px solid #EDE7DB;
            padding-bottom: 15px;
            margin-left: 40px;
            margin-bottom: 20px;
        }

        .list {
            margin-left: 40px;
            max-height: 800px;
            min-height: 800px;
            overflow-y: scroll;

            .empty {
                min-height: 800px;
            }
        }

        .page {
            display: flex;
            justify-content: flex-end;
            position: absolute;
            right: 0;
            bottom: $bto;
        }
    }
}

:deep(.is-active) {
    background-color: $primary-color !important;
    border-radius: 50% !important;
    color: #fff !important;
}
</style>